
$slidingTabsHeight: 48px;

ion-slide {
  background-color: #f0f0f0;

  &:nth-child(2n) {
    background-color: #fff;
  }
}

.slider {
  height: 100%;
}


.slidingTabs {
  height: $slidingTabsHeight;

  .scroll {
    height: auto;
    min-width: 100%;
  }

  z-index: 10;

  ul {
    background-color: $bar-positive-bg;
    height: $slidingTabsHeight;

    li {
      height: $slidingTabsHeight;
      line-height: $slidingTabsHeight;
      text-align: center;
      float: left;
      margin: 0;
      padding: 0 12px 20px 12px;
      font-size: 11px;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      @include transition(color .25s ease-in-out);
      position: relative;
      overflow: hidden;

      &.tab-active {
        color: #fff;
      }

      .ink {
        display: block; position: absolute;
        background: rgba(56, 147, 245,.8);
        border-radius: 100%;
        transform: scale(0);
      }

      .ink.animate {
        @include animation(ripple 0.65s linear);
      }

    }
  }

  .tab-indicator-wrapper {
    width: 100%;
    height: 2px;
    background-color: rgba(255,255,255,.2);
    -webkit-transform: translateY(-2px);
    position: absolute;

    .tab-indicator {
      height: 100%;

      background-color: #fff;
      width: 70px;
      position: relative;
    }
  }

}

@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}